import React from 'react';
import { browserHistory, Link } from 'react-router';
import { Form, Icon, Input, Button, Checkbox, Spin } from 'antd';
const FormItem = Form.Item;
import * as actions from './../../actions/frontEnd/loginAction';

class NormalLoginForm extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
          loading: false
      }
  }
  componentDidMount(){
    window.onresize = function () {
      var marginTop = (document.body.clientHeight/2) - 167;
      if(marginTop >= 120){
        $(".divBackground").css("marginTop",marginTop + "px");
      }
    }
    window.onresize();
  }
  signUp(){
    browserHistory.push("registered");
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        sessionStorage.setItem("username", values.username);
        if(values.username.indexOf("@") == -1){
            actions.login(this,{
                username: values.username,
                password: values.password
            });
        }else{
            actions.login(this,{
                email: values.username,
                password: values.password
            });
        }
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login">
        <div id="container" className="container">
          <div className="divBackground">
            <a href="/"><img src="/src/styles/images/frobalogo.png" className="imgFrobalogo"/></a>
            <div className="divQuality">
              <div className="divAuthentic"></div>
              <div className="divLighting"></div>
            </div>
            <div className="loginForm" >
                <Spin spinning={this.state.loading} tip="登入中, 请稍候...">
                  <div className="shadow_l"></div>
                  <div className="divHeader">
                      <img src="/src/styles/images/logo.png" width="220"/>
                  </div>
                  <Form onSubmit={this.handleSubmit} className="login-form">
                    <FormItem>
                      {getFieldDecorator('username', {
                        rules: [{ required: true, message: '请输入账号 / 邮箱.' }],
                      })(
                        <Input addonBefore={<Icon type="user" size="large" style={{ fontSize: 14 }} />} placeholder="账号 / 邮箱" size="large" />
                      )}
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: '请输入密码.' }],
                      })(
                        <Input addonBefore={<Icon type="lock" style={{ fontSize: 14 }} />} type="password" placeholder="密码" size="large"/>
                      )}
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: false,
                      })(
                        <Checkbox>记住密码</Checkbox>
                      )}
                      <a className="login-form-forgot" onClick={this.signUp}>注册</a>
                      <Button type="primary" htmlType="submit" className="login-form-button">登 录</Button>
                    </FormItem>
                  </Form>
                  <div className="shadow_r"></div>
                </Spin>
                <div className="divFooter">支持 IE10 及以上版本的浏览器。为了您更顺畅的使用体验，建议使用：谷歌 Chrome 浏览器</div>
            </div>
          </div>
        </div>

      </div>
    );
  }
}
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
export default WrappedNormalLoginForm;
